<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
    />
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #image="scope">
        <el-image
          v-if="scope.row.picture"
          style="width: 60px; height: 60px"
          :src="getPicUrl(scope.row.picture)"
          :preview-src-list="getPicUrlList(scope.row.picture)"
        >
        </el-image>
        <span v-else>无</span>
      </template>
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(row)"
        >
          划拨
        </el-button>
      </template>
    </PageContent>

    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="设备划拨"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    >
    </PageModal>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import { fetchSaveDeviceTransfer } from "@/api/deviceManage";
import { getUserList } from "@/api/user";

export default {
  name: "DeviceTransfer",
  data() {
    return {
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {},
      modalFormData: {
        sn: "",
        name: "",
        brandId: "",
        picture: "",
      },
    };
  },
  computed: {
    getPicUrl() {
      return (data) => {
        return JSON.parse(data)[0]?.absolutePath;
      };
    },
    getPicUrlList() {
      return (data) => {
        const arr = JSON.parse(data);
        if (Array.isArray(arr)) {
          return arr.map((item) => item.absolutePath);
        }
      };
    },
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleEdit(row) {
      this.title = "编辑设备";
      this.modalFormData = {
        ...row,
      };
      this.initSelectOptions();
      this.dialogVisible = true;
    },
    initSelectOptions() {
      getUserList({ pageSize: 10000, pageNum: 1 }).then((res) => {
        this.modalFormConfig.formItems.forEach((item) => {
          if (item.field === "userId") {
            item.options = res.data?.userList.map((item) => {
              return {
                label:`${item.name}（${item.phone}）`,
                value: item.id,
              };
            });
          }
        });
      });
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      const { sn, userId } = { ...this.modalFormData, ...data };
      fetchSaveDeviceTransfer( sn, userId )
        .then(() => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.confirmBtnLoading = false;
          this.dialogVisible = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.device-static {
  padding: 0 20px;
  margin-top: 20px;
  .icon-point {
    margin-right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: -2px;
    &.icon-point-online {
      background-color: #67c23a;
    }
    &.icon-point-offline {
      background-color: #f56c6c;
    }
  }
}
.name {
  text-align: center;
}
.info {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 30px;
  color: #1d2129;
  text-align: center;
  justify-content: center;
  img {
    margin-right: 8px;
  }
  .unit {
    display: inline-block;
    margin: 6px 0 0 4px;
    font-size: 16px;
  }
}
</style>
